<template>
	<view class="menu">
		<!-- 顶部搜索 start -->
		<view class="nav">
			<view class="search">
				<uni-icons color="#0c34ba" type="search"></uni-icons>
				<!-- confirm-type 设置键盘右下角按钮的文字 -->
				<!-- @confirm 点击完成按钮时触发 -->
				<input type="text" confirm-type="search" @confirm="doSearch" v-model="searchInput" placeholder="输入商品名称" />
			</view>
		</view>
		<!-- 顶部搜索 end -->
		<!-- 分类 start -->
		<view class="productType">
			<swiper class="swiper-box" :interval="3000" :duration="1000">
				<swiper-item class="typeItem" v-for="(v,page) in newList" :key="page">

					<view class="swiper-item" v-for="(item,index) in v.type" :key="index" @click="clickType(index,page)"
						:class="{active:index===newList[page].pageIndex}">

						<!-- {{item}} -->

						<image v-if="index===newList[page].pageIndex" :src="item.activeUrl" mode="widthFix" class="img">
						</image>

						<image v-else :src="item.url" mode="widthFix" class="img"></image>

						<view class="type-text">
							{{item.typeDesc}}

						</view>

					</view>
				</swiper-item>

			</swiper>

		</view>
		<!-- 分类 end -->
		<!-- 分类商品 start -->
		<view class="product">
			<view class="product-item" v-for="(item,index) in productList[selectType]" @click="toDetail(item.pid)">
				<!-- {{item}} -->
				<image :src="item.smallImg" mode="widthFix" class="img"></image>
				<view class="product-text">
					<view class="name">
						{{item.name}}
					</view>
					<view class="enname">
						{{item.enname}}
					</view>
				</view>
				<view class="price">
					￥{{item.price}}
				</view>
			</view>
		</view>
		<!-- 分类商品 end -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{


					id: 0,
					type: 'isHot',
					typeDesc: "推荐",

					url: '../../static/images/icons_09.gif',
					activeUrl: '../../static/images/icons_21.gif',
					isActive: true

				}],
				imgUrl: [
					{
						url: '../../static/images/icons_03.gif',
						activeUrl: '../../static/images/icons_18.gif'
					},
					{
						url: '../../static/images/icons_05.gif',
						activeUrl: '../../static/images/icons_19.gif'
					},
					{
						url: '../../static/images/icons_07.gif',
						activeUrl: '../../static/images/icons_20.gif'
					},
					{
						url: '../../static/images/icons_11.gif',
						activeUrl: '../../static/images/icons_22.png'
					}
				],
				num: 4,
				newList: [],
				selectType: 'isHot',// 当前选择的类型
				productList: { // 商品类型列表
					isHot: [],
					latte: [],
					coffee: [],
					rena_ice: [],
					fruit_tea: []
				},
				searchInput:'' // 搜索关键字
			}
		},
		methods: {
			// 获取商品类型数据
			getType() {
				uni.request({
					url: 'http://www.kangliuyong.com:10002/type',
					data: {
						appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA="
					},
					success: (res) => {
						// console.log(res.data.result);
						let list = res.data.result
						for (let i in list) {
							// console.log(i)
							// console.log(list[i])
							// 把图片路径加到每个类型对应的对象
							list[i]['url'] = this.imgUrl[i].url;
							list[i]['activeUrl'] = this.imgUrl[i].activeUrl;
							this.typeList.push(list[i])

						}
						// console.log(this.typeList)
						this.change();
					}
				})

			},
			// 初始化数据 第一页显示4个
			change() {
				// console.log(this.typeList.length)
				for (var i = 0; i < this.typeList.length; i += this.num) {

					let obj = {
						// 判断 pageIndex
						pageIndex: -1,
						// type存储数组 裁切需要的数据
						type: this.typeList.slice(i, i + this.num),

					};
					//推进 新数组
					this.newList.push(obj)
					// 默认显示第一页的推荐商品
					this.newList[0].pageIndex = 0;

				}
				console.log("-----newList----")
				console.log(this.newList);
			},
			// 点击类型改变样式
			clickType(index, page) {
				// console.log(index)
				// console.log(this.newList[0].type[index])
				//排他思想
				// 清除 之前的高亮
				for (let i = 0; i < this.newList.length; i++) {
					//判断 之前是否 有图标被点击了
					if (this.newList[i].pageIndex > -1) {
						//把被点击的 图标 去除 高亮
						this.newList[i].pageIndex = -1
					}
				}
				//激活 对应的高亮
				this.newList[page].pageIndex = index
				// 获取对应类型数据
				this.selectType = this.newList[page].type[index].type;
				// console.log(this.selectType)
				this.getProduct(this.selectType)

			},
			//根据类型获取商品
			getProduct(v) {
				let key = 'type';
				// 判断是不是推荐商品，是就改变key
				if (this.selectType == 'isHot') {
					key = 'isHot'
					v = 1
				}
				uni.request({
					url: "http://www.kangliuyong.com:10002/typeProducts",
					data: {
						appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
						key: key,
						value: v
					},
					success: (res) => {
						// console.log(res.data.result)
						// 把商品根据类型赋值到对应数组
						if (this.selectType == 'isHot') {
							this.productList[key] = res.data.result
						} else {
							this.productList[v] = res.data.result
						}

						// console.log(this.productList[v])
						console.log("----productList----")
						console.log(this.productList)
					}
				})
			},
			// 点击跳转到对应页面
			toDetail(pid) {
				uni.navigateTo({
					url: `../detail/detail?pid=${pid}`
				})

			},
			// 跳转到搜索功能
			doSearch(){
				// console.log(event.detail)
				uni.navigateTo({
					url:`../search/search?text=${this.searchInput}`
				})
				this.searchInput=''
			}
		
		},

		onLoad() {
			this.getType();
			this.getProduct(this.selectType);

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f7f7f7;
	}

	.menu {
		// height: 188vh;

		// 顶部搜索框
		.nav {
			padding: 20rpx;
			background-color: #fff;

			.search {

				flex: 1;
				background-color: #f7f8fa;
				line-height: 60rpx;
				display: flex;
				border-radius: 50rpx;
				padding-left: 10rpx;

				input {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 10rpx;

				}
			}
		}

		// 商品类型
		.productType {
			background-color: #fbfaf8;

			.swiper-box {
				height: 150rpx;

				.typeItem {
					display: flex;
					justify-content: space-between;

					.swiper-item {
						padding: 15rpx 30rpx;


						.img {
							width: 80rpx;
						}

						.type-text {
							text-align: center;
							font-size: 24rpx;
						}
					}
				}

			}

		}

		// 商品样式
		.product {
			padding: 20rpx;

			.product-item {
				display: flex;
				background-color: #fff;
				padding: 20rpx;
				margin-bottom: 15rpx;
				// 居中
				align-items: center;
				border-radius: 20rpx 20rpx 0 0;

				.img {
					width: 160rpx;
					margin-right: 20rpx;
				}

				.product-text {
					margin-right: 60rpx;

					.name {

						color: #646566;
						font-size: 34rpx;

					}

					.enname {
						width: 280rpx;
						height: 40rpx;
						color: #999999;
						font-size: 26rpx;

						text-align: start;
						display: -webkit-box;
						white-space: pre-wrap;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}
				}

				.price {
					font-size: 34rpx;
					color: #0c34ba;
					font-weight: bold;
				}
			}
		}
	}

	// 点击文字样式
	.active {
		color: #0c34ba;
	}
</style>
